<template>
  <div class="bg-white">
    <div class="border-b border-gray-200 text-center text-lg font-semibold">
      <ul class="flex flex-wrap justify-center">
        <li class="mr-2 cursor-pointer" @click="renderTable(1)">
          <a :class="activeIndex == 1 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">涨幅榜</a>
        </li>
        <li class="mr-2 cursor-pointer" @click="renderTable(2)">
          <a :class="activeIndex == 2 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">换手榜</a>
        </li>
        <li @click="renderTable(3)" class="cursor-pointer">
          <a :class="activeIndex == 3 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">净流入榜</a>
        </li>
      </ul>
    </div>

    <table class="text-left">
      <thead class="border-b text-lg">
        <tr>
          <th scope="col" class="px-4 py-2">股票</th>
          <th scope="col" class="px-4 py-2">价格</th>
          <th scope="col" class="px-4 py-2">涨幅</th>
          <th scope="col" class="px-4 py-2">换手</th>
          <th scope="col" class="px-4 py-2">净流入</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in list" :key="item.secu_code" class="border-b">
          <td class="px-4 py-2">
            <Stock :symbol="item.secu_code" type="rank" :name="item.secu_name"></Stock>
          </td>
          <td class="px-4 py-2 text-right font-semibold" :class="item.change_px > 0 ? 'text-red-500' : 'text-green-600'" v-if="item.last_px">
            {{ item.last_px.toFixed(2) }}
          </td>
          <td class="px-4 py-2 text-right">
            <ChangePercent :percent="item.change"></ChangePercent>
          </td>
          <td class="px-4 py-2 text-right font-semibold">{{ (item.tr * 100).toFixed(2) }}%</td>

          <td class="whitespace-nowrap px-4 py-2 text-right font-semibold" :class="item.main_fund_diff > 0 ? 'text-red-500' : 'text-green-600'">
            {{ Utils.bigNumberTransform(item.main_fund_diff, 'type') }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ref } from 'vue';
import Utils from '../utils/index';
const list = ref([]);

const activeIndex = ref(1);
let result;
function fetchData() {
  axios
    .post(
      'https://x-quote.cls.cn/web_quote/web_stock/index_stock_list?app=CailianpressWeb&change=1&main_fund_diff=1&os=web&sv=7.7.5&tr=1&sign=64df7503ec50c330b531cda52a838f3b',
    )
    .then(function (res) {
      result = res.data.data;
      // console.log(result)
      renderTable();
    });
}

function renderTable(index) {
  if (index) {
    activeIndex.value = index;
  }

  if (activeIndex.value == 1) {
    list.value = result.change;
  } else if (activeIndex.value == 2) {
    list.value = result.tr;
  } else {
    list.value = result.main_fund_diff;
  }
}

defineExpose({
  fetchData,
});
</script>
